.index-contain {
  position: relative;

  .navbar {
    position        : fixed;
    width           : 100%;
    top             : 0;
    color           : #fff;
    background-color: #C20000;
    padding         : 16px 0;
    z-index         : 1000;
    text-align: center;
    .i-back {
      align-self  : center;
      display     : inline-block;
      width       : 15px;
      height      : 15px;
      border-top  : 2px solid #fff;
      border-right: 2px solid #fff;
      transform   : rotate(225deg);
      align-self  : center;
    }

    .search {
      // float           : left;
      // margin-left: 32px;
      background-color: #fff;
      border-radius   : 16px;
      display         : flex;
      justify-content : flex-start;
      padding         : 4px 8px;
      align-items     : center;
      width           : 80%;
      margin:0 auto;

      .i-search {
        background       : url("../../assets/images/i-search.png");
        background-repeat: no-repeat;
        background-size  : 100% 100%;
        height           : 15px;
        width            : 15px;
        display          : inline-block;
      }

      .inpt-search {
        padding  : .2em .5em 0;
        border   : none;
        font-size: 14px;
        color    : #999999;
      }
    }

    .user-center {
      display       : flex;
      flex-direction: column;
      font-size     : 8px;
      align-items   : center;
      float         : right;
      margin-right  : 4em;

      .i-user {
        width          : 2em;
        height         : 2em;
        background     : url("../../assets/images/user.png");
        background-size: 100% 100%;
        display        : inline-block;
      }
    }
  }

  .banner {
    margin-top      : 48px;
    background-color: #C20000;
    width           : 100%;
    height          : 48px;
    padding-top     : 64px;
  }

  .banner-panel {
    margin       : -96px 10px 0;
    border-radius: 5px;
    box-shadow   : 0px 3px 3px #999;
    overflow     : hidden;

    &-swipe {
      img {
        height: 100%;
        width : 100%;
      }
    }
  }

  .header-category {
    //background-color: #F5F5F5;
    padding: 0 0 16px;

    &__items {
      margin-top     : 8px;
      padding        : 0 8px;
      display        : flex;
      justify-content: flex-start;
      align-items    : center;
      text-align     : center;

      .item {
        font-size: 12px;
        color    : #999;
        width    : 20%;

        img {
          width : 80%;
          height: 100%;
        }

        .text {
          margin-top: -8px;
        }
      }
    }
  }

  .contain {
    &-spike {
      background-color: #fff;
      margin          : 0 8px;
      border-radius   : 4px;
      overflow        : hidden;

      &__header {
        display        : flex;
        padding        : 8px;
        justify-content: space-between;
        align-items    : center;
        border-bottom  : 1px solid #f1eeee;

        span:first-child {
          font-size: 14px;
          color    : #333;
        }

        span:last-child {
          font-size: 12px;
          color    : #666;
        }
      }

      &__content {
        display        : flex;
        justify-content: space-between;
        padding        : 8px;

        &__item {
          padding   : 0 3.5px;
          text-align: center;
          color     : #000;
          font-size : 14px;
          width     : 25%;

          img {
            border-radius: 5px;
            border       : none;
            max-width    : 100%;
            max-height   : 100%;
          }

        }
      }
    }

    &-goods {
      background-color: #fff;
      margin          : 8px 8px 3.5px;
      border-radius   : 4px;

      &__item {
        display        : flex;
        justify-content: space-between;
        padding        : .5em;

        &__left {
          width     : 40%;
          text-align: center;
          margin    : 0px auto;

          img {
            border    : none;
            max-width : 100%;
            max-height: 100%;
          }
        }

        &__right {
          width          : 58%;
          display        : flex;
          flex-direction : column;
          justify-content: space-between;
          padding-left   : .5em;
          padding-bottom : .2em;
          text-align     : left;
          border-bottom  : 1px solid #F1EEEE;

          .title {
            color    : #333;
            font-size: 14px;
          }

          .discount-icon {
            margin: .5em 0 0;

            img {
              max-width: 95%;
            }
          }

          .discount {
            margin-top : .25em;
            display    : flex;
            align-items: center;
            color      : #DF0707;
            font-size  : 18px;

            .money {
              font-size: 10px;
            }

            .discount-tag {
              float                     : left;
              position                  : relative;
              white-space               : nowrap;
              padding                   : 0 .8em .1em .5em;
              margin                    : 0 .8em;
              border-top-right-radius   : 0.25em;
              border-bottom-right-radius: 0.25em;
              box-shadow                : inset 0 0 1px 0 #4d4d4d;
              background-color          : #DF0707;
              color                     : #fff;
              font-size                 : 10px;
            }

            .discount-tag:before {
              border      : 5px solid transparent;
              border-right: 5px solid #DF0707;
              width       : 0;
              height      : 0;
              left        : -24%;
              top         : .3em;
              position    : absolute;
              content     : ''
            }
          }

          .merge {
            margin-top : .25em;
            display    : flex;
            align-items: center;
            color      : #DF0707;
            font-size  : 14px;

            .money {
              font-size: 10px;
            }

            .merge-tag {
              float                     : left;
              position                  : relative;
              white-space               : nowrap;
              padding                   : 0 .8em .1em .5em;
              margin                    : 0 1.5em;
              border-top-right-radius   : 0.25em;
              border-bottom-right-radius: 0.25em;
              border                    : 1px solid #DF0707;
              box-shadow                : inset 0 0 1px 0 #DF0707;
              color                     : #DF0707;
              font-size                 : 9px;
            }

            .merge-tag:before {
              content         : "";
              position        : absolute;
              left            : -.1em;
              top             : .3em;
              width           : 5px;
              height          : 5px;
              transform       : rotate(45deg);
              transform-origin: top left;
              border          : 1px solid #DF0707;
              background      : #fff;
              border-top      : none;
              border-right    : none;
            }
          }

          .salse {
            margin-top     : .2em;
            display        : flex;
            justify-content: space-between;
            font-size      : 14px;
            color          : #999999;
            align-items    : center;

            &-left {
              display        : flex;
              justify-content: flex-start;

              .tag {
                margin          : .5em;
                padding         : 0.1em .45em 0;
                background-color: #E2BAA4;
                font-size       : 9px;
                color           : #DF4400;
              }
            }

            .red {
              font-size: 18px;
              color    : #DF0707;
            }
          }

        }
      }
    }
  }
}